<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        #log{
            width: 500px;
            height: 400px;
           
            float: left;
            margin-top: 200px;
            margin-left: 200px;
           
        }
        #log img{
            height: 350px;
            width: 550px;
        }
        #text{
            width: 650px;
            height: 120px;
         
            float: left;
            margin-top: 440px;
            margin-left: 40px;            
        }
        #text img{
            width: 600px;
            height: 100px;
        }
        #log1{
            position: absolute;
            margin-top: 300px;
            margin-left: 900px;
        }

        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<el-container id="app">
<el-header style="height:145px;background-color: #F8F8F8;">
    <el-row>
        <el-col>
            <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                     background-color="#F8F8F8">
                <el-menu-item index="1" style="margin-left: 350px;padding: 0px;">
                    <img src="../img/定位.png" width="35"/>
                </el-menu-item>
                <el-menu-item index="2" style="padding:0px;margin: 0px 5px;">
                    <a href="/html/shouye.html" style="text-decoration: none"><span>锅锅商城</span></a>
                </el-menu-item>
                <!--                    <el-menu-item index="3" style="padding: 0px;margin-right: 20px;">-->
                <!--                        <span>[切换]</span>-->
                <!--                    </el-menu-item>-->


                <el-menu-item index="4" style="color: red;"><a
                        :href="myUrl" style="text-decoration: none;">{{username}}</a></el-menu-item>
                <el-menu-item index="5" v-if="!loginStatus"><a :href="myUrl" style="text-decoration: none;">免费注册</a></el-menu-item>
                <el-menu-item index="5" v-if="loginStatus" @click="logout">退出</el-menu-item>

                <el-submenu index="6">
                    <template slot="title">个人中心</template>
                    <a :href="myUrl" style="text-decoration: none;">
                        <el-menu-item index="6-1">我的订单</el-menu-item>
                    </a>
                    <a :href="myUrl" style="text-decoration: none;">
                        <el-menu-item index="6-2">订单速查</el-menu-item>
                    </a>
                    <a :href="myUrl" style="text-decoration: none;">
                        <el-menu-item index="6-3">我的收藏</el-menu-item>
                    </a>
                    <a :href="myUrl" style="text-decoration: none;">
                        <el-menu-item index="6-4">我的评价</el-menu-item>
                    </a>
                    <a :href="myUrl" style="text-decoration: none;">
                        <el-menu-item index="6-5">我的设置</el-menu-item>
                    </a>
                    <a :href="myUrl" style="text-decoration: none;">
                        <el-menu-item index="6-6">会员中心</el-menu-item>
                    </a>
                    <a :href="myUrl" style="text-decoration: none;">
                        <el-menu-item index="6-7">积分商城</el-menu-item>
                    </a>
                </el-submenu>

                <el-submenu index="7">
                    <template slot="title">商户服务</template>
                    <el-menu-item index="7-1">商户中心</el-menu-item>
                    <el-menu-item index="7-2">申请加盟</el-menu-item>
                    <el-menu-item index="7-3">店铺编辑</el-menu-item>
                    <el-menu-item index="7-4">菜单编辑</el-menu-item>
                    <el-menu-item index="7-5">销量查询</el-menu-item>
                    <el-menu-item index="7-6">我的设置</el-menu-item>
                </el-submenu>
                <el-submenu index="8">
                    <template slot="title">帮助中心</template>
                    <el-menu-item index="8-1">平台规则</el-menu-item>
                    <el-menu-item index="8-2">联系客服</el-menu-item>
                </el-submenu>
            </el-menu>
            <div class="line"></div>
        </el-col>
    </el-row>
    <!-- 搜索框 -->
    <el-row>
        <el-col style="margin-left: 350px;" :span="1">
            <img src="../img/恐龙.png" width="50px"/>
        </el-col>
        <el-col :span="2">
            <div style="font-size:16px;color:black;line-height: 50px;">锅锅餐饮</div>
        </el-col>
        <el-col :span="6" :offset="0">
            <div style="margin-top: 1px;width:500px;line-height: 50px;">
                <el-input placeholder="搜索商家或者地点" v-model="searchInput" class="input-with-select">
                    <el-select v-model="searchSelect" slot="prepend" placeholder="请选择"
                               @change="MethodSearchSelectChange">
                        <el-option label="餐厅" value="1"></el-option>
                        <el-option label="地点" value="2"></el-option>
                        <el-option label="菜名" value="3"></el-option>
                        <el-option label="订单" value="4"></el-option>
                    </el-select>
                    <i slot="suffix" class="el-input__icon el-icon-circle-close"
                       @click="MethodClearSearchInput"></i>
                    <el-button slot="append" icon="el-icon-search" @click="MethodBeginSearch()"></el-button>
                </el-input>
            </div>
        </el-col>
    </el-row>
    <!-- 搜索框下的-"搜索发现" -->
    <el-row>
        <el-col style="margin-left:540px;" :span="1">
            <span style="font-size: 12px;color:#999;">搜索发现：</span>
        </el-col>
        <el-col :span="0.1" v-for="i in searchReminderData" style="margin: 0px 5px;">
            <span style="font-size: 12px;color:#999;" @click="MethodSearchReminderClick(i)">{{i}}</span>
        </el-col>
    </el-row>
</el-header>
</el-container>
   





    
    <div id="log">
        <img src="../img/logo.jpg">
    </div>
    <div id="log1"><img src="../img/404.png"></div>
    <div id="text">
        <img src="../img/doestShow.png">
    </div>
    
<script src="../js/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

    let v1 = new Vue({
        el: '#app',
        data: {
            searchInput: "", //搜索输入框
            searchSelect: "",//搜索下拉框
            searchReminderData: ["金牌泰香米", "万州烤全鱼", "瓜西西火锅", "锅锅烤鸭", "五香串串"],
            myUrl: "/html/login.html",
            username: "你好，请登录",
            loginStatus: false
        },
        methods: {
            handleSelect(key, keyPath) {    //顶部菜单激活信息回调
                console.log(key, keyPath);
            },
            MethodSearchSelectChange() { //输入下拉框改变触发事件

            },
            MethodSearchReminderClick(i) {   //搜索框下方字体点击
                this.searchInput = i;
            },
            MethodClearSearchInput() {   //叉叉按钮点击事件-清空搜索框里的文字
                this.searchInput = "";
            },
            MethodBeginSearch() {        //点击搜索图标按钮-开始搜索
                var message = this.searchInput;
                var type = this.searchSelect;
                var _this = this;
                if (message == "") {
                    _this.$message({
                        showClose: true,
                        message: "请输入内容再搜索",
                        type: 'warning',
                        duration: 1500
                    });
                } else {
                    //request search
                    var _this = this;
                    axios.get('http://localhost:8080/getSearchResult', {
                        params: {
                            message: message,
                            type: type,
                        }
                    })
                        .then(function (resp) {
                            console.log(resp);
                            // if (resp.data.success) {
                            //     let data = resp.data.data;
                            //     _this.tableData = data.content;
                            //     _this.total = data.total;
                            //     _this.currPage = data.currPage;
                            //     location.href = "/html/search.html";
                            if (resp.data.success) {
                                location.href = "/html/search.html";
                            } else {
                                _this.$message.error('请求错误' + resp.data.message);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                }
            },
            checkLoginStatus() {
                let that = this;
                $.ajax({
                    url: "/checkLoginStatus",
                    type: "get",
                    dataType: "json",
                    success: function (resp) {
                        if (resp.success) {
                            that.loginStatus = true;
                            that.myUrl = "/html/guoguolog.html";
                            that.username = resp.data.username;
                        }
                    }
                });
            },
            logout() {
                $.ajax({
                    url: "/logout",
                    type: "get",
                    dataType: "json",
                    success: function (resp) {
                        if (resp.success) {
                            location.href = "/html/shouye.html";
                        }
                    }
                });
            }
        },
        mounted: function () {
            this.checkLoginStatus();
        }
    });

</script>
</body>
</html>